<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    
    <meta http-equiv="Content-Language" content="en" />
    <title>The Palace - Reservation</title>
	<link rel="stylesheet" type="text/css" href="./style.css" />
	<link rel="stylesheet" type="text/css" href="./jquery.datepick.css" />
	<link rel="stylesheet" type="text/css" href="./jquery.selectbox.css" />
	<link rel="stylesheet" type="text/css" href="./colorpicker/css/colorpicker.css" />
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
	<!--[if IE 7]> 
	<link rel="stylesheet" type="text/css" href="style-ie7.css" />
	<![endif]-->
	<!--[if IE 8]> 
	<link rel="stylesheet" type="text/css" href="style-ie8.css" />
	<![endif]-->
	<!--[if IE 9]> 
	<link rel="stylesheet" type="text/css" href="style-ie9.css" />
	<![endif]-->
	<script src="./js/jquery-1.6.4.min.js" type="text/javascript"></script>
	<script src="./js/jquery-ui.1.8.16.min.js" type="text/javascript"></script>
	<script src="./js/sliders.js" type="text/javascript"></script>
	<script src="./js/superfish.js" type="text/javascript"></script>
	<script src="./js/pdate.js" type="text/javascript"></script>
	<script src="./js/pcode.js" type="text/javascript"></script>
	<script src="./js/jquery.datepick.pack.js" type="text/javascript"></script>
	<script src="./js/jquery.selectbox-0.1.3.min.js" type="text/javascript"></script>
	<script src="./js/jquery.validate.min.js" type="text/javascript"></script>
	<script src="./js/jquery.form.js" type="text/javascript"></script>
	<script src="./colorpicker/js/colorpicker.js" type="text/javascript"></script>
	<script src="./js/miscellaneous.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#nav ul').superfish();
		full_width_slider(false, false, 5000, 1000); //parameters: autoplay: boolean, fade out arrow when no move: boolean, pause time: integer milliseconds, transition speed: integer milliseconds
		set_datepicker();
		set_select();
		validation();
		jquery_miscellaneous();
	});
	</script>
<meta charset="UTF-8"></head>

<body>
	
	<!-- begin full-width-header -->
	<div id="full-width-header-small">
		
		<!-- begin header -->
		<div id="header">
		
			<!-- begin logo -->
			<div id="logo">
				<h1>
					<a href="./index.html">
						<!-- put your logo just below -->
						<img src="./img-demo/logo.png" alt="" />
					</a>
				</h1>
				<div id="logo-bottom">&nbsp;
					<div id="logo-bottom-left"></div>
					<div id="logo-bottom-right"></div>
				</div>
			</div>
			<!-- end logo -->
			
			<!-- begin main navigation -->
			<div id="nav">
				
				<div id="nav-left"></div>
				<div id="nav-right"></div>
				
				<ul>
					<li><a href="./index.html">Home</a></li>
					<li><a href="./rooms.html">Rooms &amp; Suites&nbsp;&nbsp;<span class="nav-arrow-down">&#9660;</span></a>
						<ul>
							<li><a href="./room.html">Single room</a></li>
							<li><a href="./room.html">Double room<span class="nav-arrow-right">&#9658;</span></a>
								<ul>
									<li><a href="#">Nothing interesting here</a></li>
									<li><a href="#">This is just to show</a></li>
									<li><a href="#">The drop-down menu</a></li>
									<li><a href="#">With another level<span class="nav-arrow-right">&#9658;</span></a>
										<ul>
											<li><a href="#">Nothing interesting here</a></li>
											<li><a href="#">This is just to show</a></li>
											<li><a href="#">The drop-down menu</a></li>
											<li><a href="#">With another level</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a href="./room.html">Twin room</a></li>
							<li><a href="./room.html">Family room</a></li>
							<li><a href="./room.html">Deluxe room</a></li>
							<li><a href="./room.html">Lough view suite</a></li>
							<li><a href="./room.html">VIP suite</a></li>
							<li><a href="./room.html">Palace suite</a></li>
						</ul>
					</li>
					<li><a class="nav-current" href="./reservation.html">Reservation</a></li>
					<li><a href="./pages.html">Template pages&nbsp;&nbsp;<span class="nav-arrow-down">&#9660;</span></a>
						<ul>
							<li class="nav-rounded-right-top"><a href="./index.html">Home page</a></li>
							<li><a href="./home-classic.html">Classic home</a></li>
							<li><a href="./home-static.html">Static home</a></li>
							<li><a href="./rooms.html">Rooms overview</a></li>
							<li><a href="./room.html">Room description</a></li>
							<li><a class="nav-current" href="./reservation.html">Reservation</a></li>
							<li><a href="./news.html">News</a></li>
							<li><a href="./columns.html">Full-width with columns</a></li>
							<li><a href="./gallery.html">Gallery</a></li>
							<li><a href="./elements.html">Elements</a></li>
							<li><a href="./location.html">Location</a></li>
							<li><a href="./contact.html">Contact</a></li>
						</ul>
					</li>
				</ul>
				
			</div>
			<!-- end main navigation -->
			
		</div>
		<!-- end header -->
		
		<!-- begin top-area -->
		<div id="top-area">
			
			<!-- begin form-login -->
			<form id="form-login" action="">
				<p id="top-area-text">
					Sign in:
				</p>
				<p>
					<input id="top-area-login" type="text" value="Type in your login" />
					<input id="top-area-password" type="password" value="XXXXXX" />
					<a id="top-area-button-submit" class="button-sign-in" href="#">SIGN IN</a>
				</p>
				<div id="top-area-nav">
					<ul>
						<li><a class="sign-in" href="#">Sign in</a></li>
						<li><a href="#">Register</a></li>
					</ul>
					<div id="top-area-nav-left"></div>
					<div id="top-area-nav-right"></div>
				</div>
			</form>
			<!-- end form-login -->
			
			<div id="top-area-bottom"></div>
			
		</div>
		<!-- end top-area -->
			
	</div>
	<!-- end full-width-header -->
	
	<!-- begin full-width-slider-small -->
	<div id="full-width-slider-small">	
		
		<!-- begin 1st slide -->
		<div class="slide">
			<div class="slide-image">
				<img src="./img-demo/booknpen.jpg" alt="" />
			</div>
			<div class="slide-caption-container">
				<div class="slide-caption">
					<p class="caption-heading">Book online.</p>
					<p>This template comes with a working reservation form.</p>
				</div>
			</div>
		</div>
		<!-- end 1st slide -->
			
	</div>
	<!-- end full-width-slider-small -->		
		
	<!-- begin main-content	-->
	<div id="main-content">
		
		<div id="main-container-top"></div>
		
		<!-- main container -->
		<div id="main-container">
			
			<div id="main-container-top-gradient"></div>
			
			<!-- begin row -->
			<div class="row row-last">
				
				<h2 class="first-headings">Fill in the form below:</h2>
				
				<p>
				 	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare cursus lectus, in posuere risus malesuada sed. Praesent at ante tortor. Vivamus mollis magna vel magna eleifend volutpat vel a justo. Donec id nisi quis leo porttitor egestas at feugiat ante. Maecenas eu libero nec eros condimentum ultrices. Donec dapibus risus et ipsum lacinia eu sagittis quam porttitor. Pellentesque convallis ultrices volutpat.
				</p>
				
				<form id="form-reservation" method="post" action="reservation.php">

					<div class="column-third-width">
						
						<p>
							<label for="input-name">Name:</label>
							<input id="input-name" class="input-text input-width-260 required" name="input-name" type="text" />
						</p>
						
						<p>
							<label for="input-e-mail">E-mail:</label>
							<input id="input-e-mail" class="input-text input-width-260 required email" name="input-e-mail" type="text" />
						</p>
						
						<div class="column-sixth-width">
							<p class="select-width-110">
								<label for="select-n-adults">Adults:</label>
								<select id="select-n-adults" class="select-jquery" name="select-n-adults">
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
								</select>
							</p>
						</div>
						
						<div class="column-sixth-width column-last">
							<p class="select-width-110">
								<label for="select-n-children">Children:</label>
								<select id="select-n-children" class="select-jquery" name="select-n-children">
									<option value="0">0</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
								</select>
							</p>
						</div>
						
					</div>
					
					<div class="column-third-width">
						
						<p class="select-width-260">
							<label for="select-type-of-room">Type of room:</label>
							<select id="select-type-of-room" class="select-jquery required" name="select-type-of-room">
								<option value="">Select a type of room</option>
								<option value="Single room">Single room</option>
								<option value="Double room">Double room</option>
								<option value="Twin room">Twin room</option>
								<option value="Family room">Family room</option>
								<option value="Deluxe room">Deluxe room</option>
								<option value="Lough view suite">Lough view suite</option>
							</select>
						</p>
						
						<p>
							<label for="input-check-in-date">Check-in date:</label>
							<input id="input-check-in-date" class="input-text input-date input-width-260 pdate" name="input-check-in-date" type="text" value="DD/MM/YYYY" />
						</p>
						
						<p>
							<label for="input-check-out-date">Check-out date:</label>
							<input id="input-check-out-date" class="input-text input-date input-width-260 pdate" name="input-check-out-date" type="text" value="DD/MM/YYYY" />
						</p>
					
					</div>
					
					
					<div class="column-third-width column-last">
					
						<p>
							<label for="textarea-reservation">Want to say something?</label>
							<textarea id="textarea-reservation" class="textarea-small" name="textarea-reservation" rows="10" cols="10"></textarea>
						</p>
						
					</div>
					
					<div class="clear"></div>
					
					<p>&nbsp;</p>
					
					<p>
						Consectetur adipiscing elit. Nullam ornare cursus lectus, in posuere risus malesuada sed. Praesent at ante tortor. Vivamus mollis magna vel magna eleifend volutpat vel a justo. Donec id nisi quis leo porttitor egestas at feugiat ante. Maecenas eu libero nec eros condimentum ultrices. Donec dapibus risus et ipsum.
					</p>
				
					<p>
						<input type="submit" class="input-submit button-red" value="SEND NOW!" />
					</p>
					
					<p class="ajax-loader"></p>
					
				</form>
				
				<div id="submit-result"></div>
				
			</div>
			<!-- end row -->
			
		</div>
		<!-- end main container -->
		
		<div id="main-container-bottom"></div>
	
	</div>
	<!-- end main content -->
	
	<!-- begin full-width-footer -->
	<div id="full-width-footer">
	
		<div id="footer-image"></div>
		
		<div id="footer-mask"></div>
		
		<!-- begin footer-content-container -->
		<div id="footer-content-container">
			
			<!-- begin footer-content -->
			<div id="footer-content">
			
				<!-- begin 1st column -->
				<div class="column-fifth-width">
					<h3>Navigation</h3>
					<ul>
						<li><a href="./index.html">Home page</a></li>
						<li><a href="./home-classic.html">Classic home</a></li>
						<li><a href="./home-static.html">Static home</a></li>
						<li><a href="./rooms.html">Rooms overview</a></li>
						<li><a href="./room.html">Room description</a></li>
						<li><a href="./reservation.html">Reservation</a></li>
						<li><a href="./news.html">News (with right sidebar)</a></li>
						<li><a href="./columns.html">Full-width with columns</a></li>
						<li><a href="./gallery.html">Gallery</a></li>
						<li><a href="./elements.html">Elements</a></li>
						<li><a href="./location.html">Location</a></li>
						<li><a href="./contact.html">Contact</a></li>
					</ul>
				</div>
				<!-- end 1st column -->
				
				<!-- begin 2nd column -->
				<div class="column-fifth-width">
					<h3>Rooms &amp; Suites</h3>
					<ul>
						<li><a href="./room.html">Single room</a></li>
						<li><a href="./room.html">Double room</a></li>
						<li><a href="./room.html">Twin room</a></li>
						<li><a href="./room.html">Family room</a></li>
						<li><a href="./room.html">Deluxe room</a></li>
						<li><a href="./room.html">Lough view suite</a></li>
						<li><a href="./room.html">VIP suite</a></li>
						<li><a href="./room.html">Palace suite</a></li>
						<li><a href="./room.html">Deluxe room</a></li>
						<li><a href="./room.html">Lough view suite</a></li>
						<li><a href="./room.html">VIP suite</a></li>
						<li><a href="./room.html">Palace suite</a></li>
					</ul>
				</div>
				<!-- end 2nd column -->
				
				<!-- begin 3rd column -->
				<div class="column-fifth-width">
					<h3>About The Palace</h3>
					<ul>
						<li><a href="./pages.html">Overview</a></li>
						<li><a href="./pages.html">Lorem ipsum</a></li>
						<li><a href="./pages.html">Team</a></li>
					</ul>	
					<h3>The Spa</h3>
					<ul>
						<li><a href="./pages.html">Massages</a></li>
						<li><a href="./pages.html">Swiming pool</a></li>
						<li><a href="./pages.html">Massages</a></li>
						<li><a href="./pages.html">Swiming pool</a></li>
						<li><a href="./pages.html">Massages</a></li>
						<li><a href="./pages.html">Swiming pool</a></li>
					</ul>
				</div>
				<!-- end 3rd column -->
				
				<!-- begin 4th column -->
				<div class="column-fifth-width">
					<h3>Packages</h3>
					<ul>
						<li><a href="./news.html">Massage &amp; Spa week</a></li>
						<li><a href="./news.html">Bed &amp; Breakfast</a></li>
						<li><a href="./news.html">Friday to Monday</a></li>
					</ul>	
					<h3>Get great deals</h3>
					<ul>
						<li><a href="#">The Palace on Twitter</a></li>
						<li><a href="#">The Palace on Facebook</a></li>
						<li><a href="#">The Palace on Lorem</a></li>
						<li><a href="#">The Palace on Ipsum</a></li>
						<li><a href="#">The Palace on Amor</a></li>
					</ul>
				</div>
				<!-- end 4th column -->
				
				<!-- begin 5th column -->
				<div class="column-fifth-width column-last">
					<h3>Footer easy to use</h3>
					<p>
						Put a wide photo and 
						the CSS rules included in 
						this HTML theme
						will tone it down and add a gradient 
						to smoothly join
						the main background (you may need to
						change the color of the footer text 
						if you go
						with a dark background).
					</p>
				</div>
				<!-- end 5th column -->

				<div class="clear"></div>																																																																																								
				
				<!-- begin footer-copyright -->
				<div id="footer-copyright">
				&copy; Copyright 2011 The Palace  -  Designed by <a href="http://themeforest.net/user/AurelienD/?ref=AurelienD">AurelienD</a> for <a href="http://themeforest.net/?ref=AurelienD">ThemeForest</a>
				</div>
				<!-- end footer-copyright -->
			</div>
			<!-- end footer-content -->
			
		</div>
		<!-- end footer-content-container -->
	
	</div>
	<!--end full-width-footer -->
	
	<!-- begin demo-color -->
	<div id="demo-color">
		<b>Background color:</b><br/><br/>
		<div id="colorSelector"><div id="colorSelectorBackground"></div></div>
		Note that you can easily change the color of all buttons.
		7 colors are predefined. Have a look at <a href="./elements.html">the elements page.</a>
		<a href="#" id="button-settings"></a>
	</div>
	<!-- end demo-color -->
	
	<!-- begin demo-buy -->
	<div id="demo-buy">
		<a class="button-buy-it" href="http://themeforest.net/item/the-palace-hotel-and-business-html-theme/694689?ref=AurelienD">BUY THIS THEME!</a>
		<a href="#" id="button-buy"></a>
	</div>
	<!-- end demo-buy -->
																																																																																								<div style="position: absolute; top: 0; left: -9999px">Le lapin blanc needs to be follow! Did you know this?</div>			
</body>
</html>